<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form slot="page-search" ref="form" :inline="true">
				<el-form-item
					:label="$t('common.belong_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="form.merchantId"
					></merchant-select>
				</el-form-item>
				<!-- 所属总代 -->
				<el-form-item
					:label="$t('funds.fund_audit.belong_general_agent')"
				>
					<el-input
						clearable
						v-model="form.topProxyName"
						:placeholder="$t('common.please_enter')"
					/>
				</el-form-item>
				<!-- 上级代理 -->
				<el-form-item :label="`${$t('common.top_agent')}:`">
					<el-input
						clearable
						v-model="form.parentProxyName"
						:placeholder="$t('common.please_enter')"
					/>
				</el-form-item>
				<!-- 代理/会员账号 -->
				<el-form-item>
					<el-select
						v-model="form.userType"
						style="width: 120px"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							:label="$t('agent.agent_account')"
							:value="1"
						></el-option>
						<el-option
							:label="`${$t('common.member_number')}`"
							:value="0"
						></el-option>
					</el-select>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="form.userName"
						clearable
						size="medium"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<!-- 代理层级 -->
				<el-form-item :label="$t('agent.agent_level')">
					<el-select
						v-model="form.parentProxyLevel"
						style="width: 120px"
						clearable
						collapse-tags
						:disabled="form.userType === 0"
						:placeholder="$t('common.all')"
					>
						<el-option
							v-for="item in proxyLevels"
							:key="item.id"
							:label="item.id"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- 占成模式 -->
				<!-- <el-form-item :label="$t('common.share_mode')">
					<el-select
						v-model="form.parentProxyLevel"
						style="width: 120px"
						clearable
						collapse-tags
						:placeholder="$t('common.all')"
					>
						<el-option
							v-for="item in proxyLevels"
							:key="item.id"
							:label="item.id"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item> -->
				<!-- 状态 -->
				<el-form-item :label="`${$t('common.status')}`">
					<el-select clearable v-model="form.status" :placeholder="$t('common.select_all')">
						<el-option
							v-for="(v, k) in ratioStatus"
							:key="k"
							:label="v"
							:value="Number(k)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`${$t('friendInvitation.modify_time')}`">
					<el-date-picker
						clearable
						v-model="updatedAt"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_time')"
						:end-placeholder="$t('common.end_time')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="失效时间">
					<el-date-picker
						clearable
						v-model="effectAt"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item> -->
				<!-- <el-form-item label="代理账号">
					<el-input
						clearable
						v-model="form.userName"
						placeholder="请输入"
					/>
				</el-form-item> -->

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<Table
				ref="pageTable"
				:formatParams="formatParams"
				:searchFormValues="form"
				@clearForm="clearForemValues"
				:tableHeight="tableHeight"
			/>
		</template>
	</main-content>
</template>

<script>
// import Page from '@/components/Page'
import list from '@/mixins/list'
import Table from './components/table'
import { filterEmptyParams, formatDatePicker } from '@/utils'
import MainContent from '@/components/MainContent/index.vue'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'agentPoint',
	components: {
		Table,
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			ratioStatus: {
				0: '未设置',
				1: '已生效',
				// 2: '已失效',
				3: '平台调整'
				// 99: '全部'
			},
			// 修改时间
			updatedAt: [],
			// 生效时间
			effectAt: [],
			form: {
				merchantId: undefined,
				topProxyName: undefined,
				status: undefined,
				signProxyLevel: undefined,
				userName: undefined,
				userType: 1
			},
			proxyLevels: []
		}
	},
	watch: {
		'form.userType'(userType) {
			if (userType === 0) {
				this.form.parentProxyLevel = undefined
			}
		}
	},
	created() {
		this.getProxyLevels()

		const { query } = this.$route
		if (query.id) {
			this.form.userName = query.userName
			this.form.merchantId = query.merchantId

			if (query.userName && query.merchantId) {
				this.updatedAt = undefined
				this.effectAt = undefined
			}
		}
	},
	methods: {
		formatParams() {
			const params = Object.assign({}, filterEmptyParams(this.form), {
				updatedAtStart: formatDatePicker(this.updatedAt)[0],
				updatedAtEnd: formatDatePicker(this.updatedAt)[1],
				lostEffectDtStart: formatDatePicker(this.effectAt)[0],
				lostEffectDtEnd: formatDatePicker(this.effectAt)[1]
			})
			if (params.topProxyName) {
				params.isAllSub = true
			}
			return params
		},
		clearForemValues() {
			Object.keys(this.form).forEach((key) => {
				this.form[key] = undefined
				// if (key && key === 'status') {
				// 	this.form[key] = 1
				// } else {
				// }
			})
			this.form.userType = 1
			this.form.nameType = 1
			this.updatedAt = []
			this.effectAt = []
		},
		reset() {
			this.clearForemValues()
			this.$refs['pageTable'].handleBack()
		},
		search() {
			this.$refs['pageTable'].handleBack()
			// this.$refs['pageTable'].filter(this.formatParams())
		},
		getProxyLevels() {
			this.$api.getProxylevelnameList().then((res) => {
				this.proxyLevels = res.data || []
			})
		}
	}
}
</script>
